<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/1px.css" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      .mui-content {
        background-color: #fff;
      }
      /*头像*/
      
      .flex {
        display: flex;
      }
      
      .user-info {
        padding: 3px 0;
      }
      
      .header {
        flex: 3;
        text-align: center;
      }
      
      .header img {
        height: 70px;
        width: 70px;
        vertical-align: middle;
      }
      
      .info {
        flex: 5;
        font-size: 14px;
        line-height: 24px;
      }
      
      .change-btn {
        flex: 2;
      }
      /**/
      
      .exchange {
        padding: 0 2%;
        margin: 5px 0;
      }
      
      .text {
        font-size: 13px;
        text-align: center;
      }
      
      .line {
        margin-top: 10px;
      }
      /*列表*/
      
      .goods-list {
        list-style: none;
      }
      
      .goods-each {
        padding: 5px 5px;
        position: relative;
      }
      .bgGray{
      	background-color: #F8F8F8;
      }
      .img-box {
        flex: 2;
      }
      
      .img-box img {
        height: 70px;
        width: 70px;
        vertical-align: middle;
        text-align: center;
      }
      
      .goods-info-box {
        flex: 4;
        font-size: 14px;
        line-height: 24px;
      }
      
      .goods-info-box div {
        margin-left: 5px;
      }
      
      .goods-op-box {
        flex: 3;
        position: relative;
        height: 100%;
      }
      .goods-op-box p{
      	height: 15px !important;
      	line-height: 15px !important;
      	font-size: 13px;
      }
      .goods-op-box p:nth-of-type(0){
      	margin-top: 5px;
      }
      .recovery-num {
        position: absolute;
        right: 20px;
        font-size: 13px;
      }
      
      .choose-btn {
        width: 70%;
        position: absolute;
        bottom: -70px;
        right: 5px;
        text-align: center;
      }
      /**/
     .storege-date{
     	font-size: 13px;
     	text-indent: 5px;
     }
      
      /*滚动区*/
      
      .mui-scroll-wrapper {
        top: 115px;
        bottom: 50px;
      }
      /*底部*/
      
      .total-info {
        line-height: 25px;
        background-color: #fff;
        bottom: 0;
        position: absolute;
        width: 100%;
        font-size: 13px
      }
      
      .total-info>span {
        margin-left: 10px;
      }
      .operation-info{
      	text-indent: 10px;
      }
    </style>
  </head>

  <body>
    <script src="../js/mui.min.js"></script>
    <div class="mui-content">
      <div class="user-info flex vux-1px-b">
        <div class="header">
          <img src="" alt="" />
        </div>
        <div class="info">
          <div></div>
          <div>ID：</div>
          <div>当前积分：</div>
        </div>
        <div class="change-btn">
        </div>
      </div>
      <!---->
      <div class="exchange mui-row">
        <div class="line mui-col-sm-4 mui-col-xs-4 vux-1px-b"></div>
        <div class="text mui-col-sm-4 mui-col-xs-4">回收日志</div>
        <div class="line mui-col-sm-4 mui-col-xs-4 vux-1px-b"></div>
      </div>
      <!--礼品-->
      <div id="refreshContainer" class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <ul class="goods-list mui-table-view mui-table-view-chevron vux-1px-t">

          </ul>
          <script id="goodsList" type="text/html">
            <%for(var i=0;i<list.length;i++){%>
            <%if(i%2===0){%>
            		  <li class="goods-each">
            		<%}else {%>
            			<li class="goods-each bgGray">
            			<%}%>
              <div class="flex">
                <div class="img-box">
                  <img src="<%=imgPath+list[i].cutImg%>" alt="" />
                </div>
                <div class="goods-info-box">
                  <div class="goods-name">
                    <%=list[i].goodsName%>
                  </div>
                  <div class="goods-id">货品ID：
                    <%=list[i].goodsId%>
                  </div>
                  <div class="goods-num">积分：
                    <%=list[i].score%>
                  </div>
                </div>
                <div class="goods-op-box">
                  <p>回收数量:<%=list[i].recyclingAmount%></span>
                  	<%if(list[i].storageStatus === 2){%>
	                  <p>入库数量:<%=list[i].storageAmout%></spn>
	                  <p>入库人:<%=list[i].storageMan%></p>
                  <%}%>
                </div>
              </div>
              <%if(list[i].storageStatus === 2){%>
              <div class="storege-date">
              	入库时间：<%=list[i].storageDate%>
              </div>
               <%}%>
            </li>
            <%}%>
          </script>
        </div>
      </div>
      <!--底部-->
      <div class="total-info vux-1px-t">
        <span>回收：0款</span> <span>共：0个</span> <span>积分：+0</span>
        <div class="operation-info">
        	操作员：<span></span>&emsp;操作时间：<span></span>
        </div>
      </div>
      <!---->
    </div>
    <script src="../config.js"></script>
    <script src="../js/template-native.js"></script>
    <script type="text/javascript">
      mui.init()
      var currentShopObj = {},
      info ={}
      mui.plusReady(function() {
        scroll()
        receiveParams()
        setUser()
        setfooter()
      })

      function scroll() {
        //滚动
        mui('.mui-scroll-wrapper').scroll({
          scrollY: true,
          bounce: true,
          deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
        });
      }

      function receiveParams() {
        var self = plus.webview.currentWebview()
        currentShopObj = currentShopObj
        info = self.info
        setPage()
      }
      //头像 页尾部
      function setUser() {
        document.querySelector(".header img").setAttribute('src', config.imgPath + info.header)
        var userI = document.querySelectorAll(".info>div")
        if(info.userName){
        	userI[0].innerText = info.userName
        } else{
        	userI[0].innerText = '--'
        }
        userI[1].innerText = 'ID：' + info.userId
        userI[2].innerText = '当时积分：' + info.point
      }
      function setfooter(){
      	var infoAll = document.querySelectorAll(".total-info>span")
        infoAll[0].innerText = '回收：' + info.goodsList.length + '款'
        var totalNum = 0,
          totalScore = 0
        info.goodsList.forEach(function(item) {
          totalNum += item.recyclingAmount*1
          totalScore += item.recyclingAmount * item.score
        })
        infoAll[1].innerText = '共' + totalNum + '个'
        infoAll[2].innerText = '积分+' + totalScore
        var operation=document.querySelectorAll(".operation-info>span")
        operation[0].innerText = info.operationer
        operation[1].innerText = info.recyclingDate
      }
      //货品
      function setPage() {
        var html = template('goodsList', {
          list: info.goodsList,
          imgPath: config.imgPath
        })
        mui('.goods-list')[0].innerHTML = html
      }
    </script>
  </body>

</html>